﻿<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>PDF Preview</title>
    <script src="Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="Styles/2015/kendo.common-material.min.css" type="text/css" />
    <link rel="stylesheet" href="Styles/2015/kendo.material.min.css" type="text/css" />
    <link rel="stylesheet" href="Styles/2015/kendo.dataviz.min.css" type="text/css" />
    <link rel="stylesheet" href="Styles/2015/kendo.dataviz.material.min.css" type="text/css" />
    <script src="Scripts/2015/kendo.all.min.js" type="text/javascript"></script>
    <script src="Scripts/2015/jszip.min.js" type="text/javascript"></script>
    <script src="Scripts/bootstrap/bootstrap.min.js" type="text/javascript"></script>
    <link type="text/css" rel="stylesheet" href="Styles/MyStyle.css" />
    <style type="text/css">
        .k-button, .k-header
        {
            font-weight: 500;
            font-size: 15;
        }
    </style>
    <style>
        .pdf-page
        {
            margin: 0 auto;
            box-sizing: border-box;
            box-shadow: 0 5px 10px 2px rgba(0,0,0,.3);
            background-color: #fff;
            color: #333;
            position: relative;
            width: 8.3in;
            height: auto;
            min-height: 100% !important;
        }
        .pdf
        {
            position: absolute;
            top: .5in;
            height: .6in;
            left: .5in;
            right: .5in;
            height: auto;
            min-height: 100% !important;
        }
    </style>
     <style type="text/css">
        .page-template > *
        {
            position: absolute;
            left: 20px;
            right: 20px;
            font-size: 90%;
        }
        .page-template .header
        {
            top: 20px;
            border-bottom: 1px solid #000;
        }
        .page-template .footer
        {
            bottom: 20px;
            border-top: 1px solid #000;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            var newHeight = $(".pdf").height();
            $(".pdf-page").css("height", newHeight + 50);
        });
        function getPDF(selector) {
            kendo.drawing.drawDOM($(selector), {
                paperSize: "A4",
                template: $("#page-template").html(),
                margin: {
                    left: "20mm",
                    top: "40mm",
                    right: "20mm",
                    bottom: "10mm"
                },
                multiPage: true,
                title: "1", author: "2", subject: "3", keywords: "4", creator: "5"
            }).then(function (group) {
                return kendo.drawing.exportPDF(group);
            }).done(function (data) {
                kendo.saveAs({
                    dataURI: data,
                    fileName: "SalesOrder.pdf"
                });
            });
        }
    </script>
    <script type="x/kendo-template" id="page-template">
   <div class="page-template">
    <div class="footer">
      <div style="float: right">Page #:pageNum# of #:totalPages#</div>
    </div>
  </div>
    </script>
</head>
<body>
    <div class="page-container">
        <table style="width: 100%;">
            <tr>
                <td align="center">
                    <button type="button" id="btnCopyTo" onclick="getPDF('.pdf')" class="k-button k-button-icontext k-primary"
                        style="width: 160px;">
                        <span class="k-icon k-i-pdf"></span>Save As PDF</button>
                </td>
            </tr>
        </table>
        <br />
        <div class="pdf-page">
            <div class="pdf">
                <table style="width: 100%;">
                    <tr>
                        <td style="width: 25%;">
                            <img src="../Logo/logo.png" />
                        </td>
                        <td align="center">
                            <strong>$CompanyName</strong><br />
                            <br />
                            <span style="font-size: 18pt; display: inline; color: #3aabf0;"><strong>SALES ORDER</strong></span>
                        </td>
                    </tr>
                </table>
                <table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-top: 10px;
                    font-size: 8pt;">
                    <tr>
                        <td style="height: 30px;">
                            <div style="width: 100%; border-bottom: 1px; border-bottom-color: #e5e5e5; border-bottom-style: solid;">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <table width="100%" border="0" cellspacing="0" cellpadding="0" style="font-size: 8pt;">
                                <tr>
                                    <td width="30%">
                                        Document No.:
                                    </td>
                                    <td width="25%">
                                        $DocEntry
                                    </td>
                                    <td width="20%">
                                        Document Date:
                                    </td>
                                    <td width="30%">
                                        $DocDate
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="4" style="height: 10px;">
                                    </td>
                                </tr>
                                <tr>
                                    <td width="30%">
                                        Customer:
                                    </td>
                                    <td width="25%">
                                        $CustomerCode
                                    </td>
                                    <td width="15%" colspan="2" style="width: 45%">
                                        $CustomerName
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td style="height: 10px;">
                        </td>
                    </tr>
                    <tr>
                        <td style="border-bottom: 1px dashed #A4A4A4">
                        </td>
                    </tr>
                    <tr>
                        <td style="height: 10px;">
                        </td>
                    </tr>
                </table>
                <table style="width: 100%; text-align: left; font-size: 8pt;">
                    <tr>
                        <td align="center">
                            No.
                        </td>
                        <td>
                            Description
                        </td>
                        <td align="right">
                            Quantity
                        </td>
                        <td align="center">
                            UoM
                        </td>
                        <td align="right">
                            Price
                        </td>
                        <td align="right">
                            Tax %
                        </td>
                        <td align="right">
                            Total
                        </td>
                    </tr>
                    $TRXList
                    <tr>
                        <td colspan="7">
                            <table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-top: 5px;
                                margin-bottom: 30px; font-size: 8pt;">
                                <tr>
                                    <td style="height: 5px;" colspan="3">
                                    </td>
                                </tr>
                                <tr>
                                    <td style="border-bottom: 1px dashed #A4A4A4;" colspan="3">
                                    </td>
                                </tr>
                                <tr>
                                    <td style="height: 10px;" colspan="3">
                                    </td>
                                </tr>
                                <tr>
                                    <td width="40%">
                                    </td>
                                    <td width="35%">
                                        Total Items/Quantity
                                    </td>
                                    <td width="25%">
                                        <div align="right">
                                            $TotalQuantity</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td height="8" colspan="2">
                                        <div align="right">
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="40%">
                                    </td>
                                    <td width="35%">
                                        Sub Total
                                    </td>
                                    <td width="25%">
                                        <div align="right">
                                            $BillTotal</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td height="8" colspan="2">
                                        <div align="right">
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="40%">
                                    </td>
                                    <td width="35%">
                                        Tax Amount
                                    </td>
                                    <td width="25%">
                                        <div align="right">
                                            $Tax</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td height="8" colspan="2">
                                        <div align="right">
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="40%">
                                    </td>
                                    <td width="35%">
                                        <b>Total Amount</b>
                                    </td>
                                    <td width="25%">
                                        <div align="right">
                                            <b>$NetValue</b></div>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</body>
</html>
